AJAX can be used for interactive communication with a database.
The following example will demonstrate how a web page can fetch information from a database with AJAX:
Example:
The database table we use in the example above looks like this:
In this example, I will show you how a web page can fetch information from a database by using, selecting user name from user list.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AJAX with Database</title>
<script type="text/javascript">
function getUserDetails(str) {
if (str== "") {
document.getElementById("userDetails").innerHTML= "";
return;
}
if (window.XMLHttpRequest) {
xmlHttp=newXMLHttpRequest();
}
xmlHttp.onreadystatechange=function () {
if (xmlHttp.readyState==4) {
document.getElementById("userDetails").innerHTML= xmlHttp.responseText;
}
}
xmlHttp.open("GET", "DatabaseAjax.php?drdnVal="+str, true);
xmlHttp.send();
}
</script>
</head>
<body>
<p style="background-color: gold; width: 200px">Select User Name :</p>
<form>
<select id ="usrName" onchange="getUserDetails(this.value)" >
<option value=""> Select User Name </option>
<option value="Arun"> Arun </option>
<option value="Amit"> Amit </option>
<option value="Vineet"> Vineet</option>
<option value="Akki"> Akki</option>
<option value="Ray"> Ray</option>
</select>
</form>
<div id="userDetails">
<p> <b> User Details:</b></p>
</div>
</body>
</html>
Now select any user name from user list, when you select any user name then ‘DatabaseAjax.php’ will be called.
‘DatabaseAjax.php’ code:
<?php
// Get dropdown value from url
$val =$_GET["drdnVal"];
// create connection with database
$con = mysql_connect("localhost", "root", "root");
// Check connection successfully created or no
if(!$con)
{
// display error message when connection creation failed
die ("<b>Error : ". mysql_error());
}
// select database name
mysql_select_db("tempdatabase",$con);
//select record from table
$qry = "Select * from tempdatabase.tbltemp where username = '".$val."'";
// query result
$qryResult = mysql_query($qry,$con);
//print table structure
echo "<table border='1px solid balck'>
<tr>
<th> Id </th>
<th> UserName </th>
<th> EmailId </th>
<th> Address </th>
<th> Mobile No </th>
</tr>
";
// Display data in table column
while ($rowData = mysql_fetch_array($qryResult))
{
echo "<tr>";
echo "<td>".$rowData['Id']."</td>";
echo "<td>".$rowData['Username']."</td>";
echo "<td>".$rowData['EmailId']."</td>";
echo "<td>".$rowData['Address']."</td>";
echo "<td>".$rowData['MobileNo']."</td>";
echo "</tr>";
}
// close table tag
echo "</table>" ;
// close the connection
mysql_close($con);
?>
Output:
Select any one user name user list; here I am selecting ‘Arun’
Leave Comment